<template>
	<view class="income income-index">
		<!-- 蓝色背景 -->
		<view class="incombgc"
			  style="width: 1000rpx;height: 1000rpx;
					 border-radius: 50%;background-color: skyblue;
					 position: absolute;left: -125rpx;
					 top: 0;transform: translateY(-70%);
					 box-shadow: 0 0 15px 0 #aaa;">
		</view>
		<!-- 收益展示 -->
		<view class="income-card">
			<view class="card position-center">
				<view class="card-top flex-column-around">
					<view class="label card-top-text">
						累计收益
					</view>
					<view class="value card-top-text">
						￥ <text class="value-nums" style="font-size: 20px;">
							{{ income }}
						</text>
					</view>
				</view>
				<view class="card-bottom">
					<view class="card-bottom-buttom position-center" @click="getIncomeDeatil()">
						查看详情
					</view>
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="income-details" v-if="detailsShow">
			<view class="loading" style="position: relative; width: 750rpx;height: 20vh;text-align: center;" v-if="isLoading">
				<view class="text position-center" style="width: 750rpx;">
					{{ loadingTitle }}
				</view>
			</view>
			<view class="details-list" v-if="!isLoading">
				<view class="details-list-item" v-for="item in detailList" :key="item.advIncomeId">
					<view class="label" :class="{'cal-day': item.calMode==1}">
						{{item.calMode==1?'日结':'月结'}}
					</view>
					<view class="month" v-if="item.calMonth">
						{{ item.calYear }} 年 {{ item.calMonth }} 月
					</view>
					<view class="month" v-if="item.calDate">
						{{formatDate(item.calDate)}} 
					</view>
					<view class="details">
						<view class="details-card">
							<view class="distribution details-card-text">
								下级订单佣金: {{ item.totalAmountSub }}
							</view>
						<!-- 	<view class="commission details-card-text">
								本人订单佣金: {{ item.totalAmount }}
							</view> -->
							<!-- <view class="commission details-card-text">
								小计: {{ +item.totalAmount + +item.totalAmountSub }}
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { GET_USER_INFO } from '../../../utils/CommonValues.js';
	import request from '../../../utils/request.js';
	export default {
		data() {
			return {
				loadingTitle: '加载中...',
				isLoading: true,
				advMembersId: '',
				income: 0,
				detailsShow: false, // 是否显示详情
				detailList: [],
			}
		},
		onLoad(option) {
			// 拿到用户id去后端查询用户 收益
			console.log(option.id)
			this.advMembersId = option.id;
			this.getIncome();
		},
		methods: {
			formatDate(stringTime) {
				function padZero(num) {
					return num < 10 ? '0' + num : num;
			    }
				var date = new Date(stringTime);
				var year = date.getFullYear();
				var month = padZero(date.getMonth() + 1); // 月份是从0开始的
				var day = padZero(date.getDate());
				return year + '-' + month + '-' + day
			},
			// 获取收入
			getIncome() {
				request.GET(`/system/income/getincome/${this.advMembersId}`)
					   .then(res => {
							console.log(res);
							this.income = res.data;
					   })
			},
			// 获取收入详细
			getIncomeDeatil() {
				this.isLoading = true;
				request.GET(`/system/income/getincomedetail/${this.advMembersId}`)
					   .then(res => {
							console.log(res);
							if(res.data.length != 0) {
								this.detailList = res.data
								console.log(this.detailList, '收入详细')
								this.isLoading = false;
							} else {
								this.loadingTitle = '暂无收益';
							}
					   })
				// 显示
				this.detailsShow=true;
			}
		}
	}
</script>

<style lang="less">
.income {
	width: 750rpx;
	height: 100vh;
	position: relative;
	padding-top: 1px;
	background-color: #eee;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
}
.income-card {
	width: 750rpx;
	height: 140px;
	margin-top: 100rpx;
	position: relative;
	.card {
		width: 600rpx;
		height: 120px;
		background-color: white;
		border-radius: 10px;
		.card-top {
			width: 100%;
			height: 80px;
			border-bottom: 1px solid #ccc;
			.card-top-text {
				width: 100%;
				text-align: center;
				font-weight: bold;
			}
			.label {
				color: #aaa;
			}
		}
		.card-bottom {
			width: 100%;
			height: 40px;
			position: relative;
			.card-bottom-buttom {
				width: 25%;
				height: 20px;
				border: 1px solid #ccc;
				border-radius: 3px;
				text-align: center;
				font-size: 12px;
				line-height: 20px;
			}
		}
	}
}
.income-details {
	width: 750rpx;
	position: relative;
	max-height: 500px;
	overflow: auto;
	.details-list {
		width: 700rpx;
		margin: 0 auto;
		padding-top: 1px;
		padding-bottom: 10px;
		.details-list-item {
			position: relative;
			width: 600rpx;
			margin: 10px auto;
			background-color: aliceblue;
			border-radius: 10px;
			padding: 10px;
			box-shadow: 0 0 10px 0 #ccc;
			.label{
				width: 100rpx;
				height: 30px;
				background-color: blueviolet;
				position: absolute;
				right: 0;
				top: 0;
				border-radius: 0 10px 0 10px;
				text-align: center;
				font-weight: bold;
				color: white;
				line-height: 30px;
			}
			.cal-day{
				background-color: darkred;
			}
			.month {
				width: 100%;
				height: 40px;
				font-size: 25px;
				font-weight: bold;
				line-height: 40px;
			}
			.details {
				width: 100%;
				.details-card {
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					.details-card-text{
						box-sizing: border-box;
						width: 100%;
						height: 50%;
						line-height: 40px;
						border-bottom: 2px solid #aaa;
					}
				}
			}
		}
	}
}
</style>
